<template>
  <div style="">
    <!--处方页面-->
    <el-row>
      <el-col :span="24" :offset="0" style="margin-top:30px;">

        <el-form :label-position="labelPosition" :inline="true" :model="formInline" class="" >
          <!--class widthHeight40  style="width: 270px;line-height:40px;float:left;"-->
          <el-form-item align="left" label="姓名" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item align="left" label="患者卡号" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.cardnum" placeholder="患者卡号"></el-input>
          </el-form-item>
          <el-form-item align="left" label="患者年龄" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.age" placeholder="患者年龄"></el-input>
          </el-form-item>
          <el-form-item align="left" label="出生日期" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.birth" placeholder="出生日期"></el-input>
          </el-form-item>
          <el-form-item align="left" label="性别" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.sex" placeholder="性别"></el-input>
          </el-form-item>
          <el-form-item align="left" label="手机号码" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.phone" placeholder="手机号码"></el-input>
          </el-form-item>
          <el-form-item align="left" label="证件号码" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.patient.identityId" placeholder="证件号码"></el-input>
          </el-form-item>
          <el-form-item align="left" label="接诊类型" class="height40-2" style="width:270px;">
            <el-input v-model="formInline.acceptType" placeholder="接诊类型"></el-input>
          </el-form-item>
          <el-form-item align="left" label="地址" class="height40-2" style="width:640px;">
            <el-input v-model="formInline.patient.address" placeholder="地址"></el-input>
          </el-form-item><br/>
          <el-form-item align="left" label="诊断" class="height40-2" style="width:640px;">
            <el-input v-model="form2.diagnose" placeholder="诊断"></el-input>
          </el-form-item>
          <el-form-item align="left" label="医嘱" class="height40-2" style="width:640px;">
            <el-input v-model="form2.prn" placeholder="医嘱"></el-input>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24" :offset="0" style="margin-top:20px;">
        <!--<el-row :gutter="0">
          <el-col :span="2" :offset="22" style="height:40px;line-height:40px;">
            <el-button type="info" @click="insertFun">添加药品</el-button>
          </el-col>
        </el-row>-->
        <el-table stripe :data="tableData" :header-cell-style="{lineHeight:'20px'}" style="width: 100%"><!--height="840"-->
          <el-table-column fixed prop="id"  type="index" label="序号"></el-table-column>
          <el-table-column prop="groupNo" label="组号">
            <template>
            <el-input v-model="tableData.groupNo" placeholder="组号"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="drugId" label="id"></el-table-column>

          <el-table-column prop="" label="名称">
            <template >{{drugInfo.repertory}}</template>
          </el-table-column>

          <el-table-column prop="dosage" label="单次用量">
            <template>
              <el-input v-model="tableData.dosage" ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="usage" label="用法">
            <el-input v-model="tableData.usage" placeholder="用法"></el-input>
          </el-table-column>
          <el-table-column prop="limit" label="频度">
            <el-input v-model="tableData.limit" placeholder="频度"></el-input>
          </el-table-column>
          <el-table-column prop="day" label="天数">
            <el-input v-model="tableData.day" placeholder="天数"></el-input>
          </el-table-column>
          <el-table-column prop="count" label="数量">
            <el-input v-model="tableData.count" placeholder="数量"></el-input>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

          <el-button type="success" @click="dialogTableVisible = true">新增药品</el-button>

          <el-dialog title="新增药品" :visible.sync="dialogTableVisible">
            <el-table
              ref="multipleTable"
              :data="drugInfo"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                type="index"
                width="50">
              </el-table-column>

              <el-table-column
                prop="drugId"
                label="编号"
                width="120">
              </el-table-column>



              <el-table-column
                prop="druginfo.name"
                label="药品名称"
                width="180">
              </el-table-column>

              <el-table-column
                prop="druginfo.kind"
                label="处方类别"
                width="100">
              </el-table-column>

              <el-table-column
                prop="druginfo.specification"
                label="规格"
                width="100">
              </el-table-column>

              <el-table-column
                prop="druginfo.formulation"
                label="剂型"
                width="100">
              </el-table-column>

              <el-table-column
                prop="druginfo.manufacturer"
                label="生产厂家"
                width="180">
              </el-table-column>

              <el-table-column
                prop="repertory"
                label="库存"
                width="80">
              </el-table-column>

              <el-table-column
                prop="druginfo.purchasePrice"
                label="采购价"
                width="60">
              </el-table-column>

              <el-table-column
                prop="druginfo.retailPrice"
                label="零售价"
                width="60">
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="addSuccess()">确 定</el-button>
            </div>
          </el-dialog>



      </el-col>
    </el-row>

    <el-row :gutter="0">
      <el-col :span="2" :offset="22" style="height:40px;line-height:40px;">
        <el-button type="success" @click="saveFun()">保存处方</el-button>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import axios from "axios"
  export default {

    data() {
      return {
        tableData:[],
        drugInfo:[
          ],
        formInline: {
        },
        form2: {},
        labelPosition: 'top',
        multipleSelection: [],
        dialogTableVisible: false,
      }
    },
    methods: {
      insertFun:function () {
        this.$router.push("/recipeInsert")
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      addSuccess(){
        this.dialogTableVisible = false;
        this.tableData=this.multipleSelection;
      },
      saveFun(){
        console.log(this.tableData);
          axios.post("api/recipe/insert",{list:this.tableData}).then(res=>{
          })
      },
      findByRegistId(registId){
        axios.post("api/registration/selectById",{registId:registId}).then(res=>{
          this.formInline=res.data;
        });
      },
      findDrug(){
        // this.druginfo=[{drugId:'2',repertory:'2'}];
        axios.get("api/inventory/findAll").then(res=>{
          this.drugInfo=res.data;
        })
       // console.log(this.druginfo)
      }
    },
    mounted(){
      var registId=sessionStorage.getItem("registId");
      this.findByRegistId("202010151201");
      this.findDrug();
    }
  }
</script>

<style scoped>
.widthHeight40{
  width: 270px;line-height:40px;float:left;margin-right:40px;
}
.height40-2{
  line-height:40px;float:left;margin-right:40px;
}
</style>
